<template>
  <h3>{{person}}</h3>
  <br>
  <h3>当前Person中name的值:{{ name }}</h3>
  <button @click="name += '~'">Name 后加个 ~ </button>
  <h3>当前Person中age的值:{{ age }}</h3>
  <button @click="age++">年龄 ++ </button>
  <h3>当前Person-job-job1的salary值:{{ salary }}K</h3>
  <button @click="salary++">job1涨薪</button>

</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  name: 'School-Comp',
  setup() {
    // 数据
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        job1: {
          salary: 10,
        }
      }
    });

    return {
      person,
      // name: toRef(person, 'name'),
      // age: toRef(person, 'age'),
      // salary: toRef(person.job.job1, 'salary')
      ...toRefs(person),
      ...toRefs(person.job.job1)
    }
  },
}
</script>

<style></style>
